<template>
	<view class="container">
		<view class="user-top u-flex u-col-center u-row-between">
			<view class="img" @click="$pageTo('/pages/index/editUser')">
				<image :src="http + userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
				<image :src="http + '/assets/img/avatar.png'" mode="aspectFill" v-else></image>
			</view>
			<view class="con">
				<view class="name u-l-1" @click="$pageTo('/pages/index/editUser')">
					{{userInfo.nickname}}
				</view>
				<view class="tel u-flex u-col-center ">
					<view class="l">
						手机号：
					</view>
					<view class="c" v-if="userInfo.phone">
						{{userInfo.phone}}
					</view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else>点击授权</button>
				</view>
			</view>
		</view>
		<view class="user-order">
			<view class="title  u-flex u-col-center u-row-between">
				<view class="l">
					我的订单
				</view>
				<view class="r  u-flex u-col-center u-row-right" @click="pageTo(`/pages/index/orderList?status=0`)">
					<text>查看全部</text>
					<image src="@/static/image/u01.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index"
					@click="pageTo(`/pages/index/orderList?status=${index+1}`)">
					<image :src="`../../static/image/u${index+1}.png`" mode="aspectFill"></image>
					<text v-if="index==0 && orderData.number1>0">{{orderData.number1}}</text>
					<text v-if="index==1 && orderData.number2>0">{{orderData.number2}}</text>
					<text v-if="index==2 && orderData.number3>0">{{orderData.number3}}</text>
					<text v-if="index==3 && orderData.number4>0">{{orderData.number4}}</text>
					<view class="t">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="user-list">
			<view class="item u-flex u-col-center u-row-between" v-for="(item,index) in list2" :key="index"
				@click="$pageTo(item.url)">
				<view class="l u-flex u-col-center">
					<image :src="`../../static/image/u1${index+1}.png`" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="r">
					<image src="@/static/image/u02.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['待支付', '待备餐', '备餐中', '待取餐'],
				nums: [0, 2, 0, 0],
				list2: [{
						name: '联系我们',
						url: '/pages/index/contact'
					},
					{
						name: '关于我们',
						url: '/pages/index/about'
					},
					{
						name: '用户协议',
						url: '/pages/index/artice?id=1'
					},
					{
						name: '隐私政策',
						url: '/pages/index/artice?id=2'
					}
				],
				uid: "",
				userInfo: {
					avatar: "",
					nickname: "",
					phone: ""
				},
				http: this.$imgUrl,
				orderData: {
					number1: 0,
					number2: 0,
					number3: 0,
					number4: 0,

				}

			}
		},
		onLoad() {

		},
		onShow() {
			if (!uni.getStorageSync('uid')) {
				this.login()
			} else {
				this.uid = uni.getStorageSync('uid')
				this.getUserInfo()
			}


		},
		methods: {
			getOrderInfo() {
				this.$http.post('/app/users/orderNumber', {
					mid: this.uid
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.orderData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			login() {
				uni.login({
					provider: 'weixin',
					success: (r) => {
						console.log(r)
						if (r.errMsg == 'login:ok') {
							this.$http.post('/app/indexs/login', {
								code: r.code,
							}).then(res => {
								if (res.code == 0) {
									if (res.data.id) {
										this.uid = res.data.id
										uni.setStorageSync('uid', res.data.id)
										this.getUserInfo()
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										});
									}
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							}).catch(err => {
								console.log('表单错误信息：', err);
							})

						}
					},
					fail: (err) => {

					}
				})
			},
			pageTo(url) {
				let status = url.split('?')[1].split('=')[1]
				getApp().globalData.tabParams = {
					status
				}
				uni.switchTab({
					url
				})
			},
			getUserInfo() {
				this.$http.post('/app/users/index', {
					mid: this.uid
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.userInfo = res.data
						this.getOrderInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getPhoneNumber(e) {
				this.$http.post('/app/users/getPhone', {
					mid: this.uid,
					code: e.detail.code
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: '获取成功',
							icon: "none"
						});
						this.getUserInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 20rpx;

		.user-list {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 20rpx;

			.item {
				padding: 40rpx 0;
				border-bottom: 2rpx solid #F8F8F8;

				&:last-child {
					border: none;
				}

				.l {
					height: 50rpx;
					line-height: 50rpx;

					image {
						width: 52rpx;
						height: 52rpx;
					}

					text {
						margin-left: 20rpx;

						
						font-size: 28rpx;
						color: #000000;
						text-align: left;

					}
				}

				.r {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.user-order {
			margin-top: 40rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 25rpx;

			.list {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text-align: center;
					position: relative;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					.t {
						margin-top: 10rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-family: PingFang SC, PingFang SC;
						
						font-size: 26rpx;
						color: #393939;
						text-align: center;

					}

					text {
						position: absolute;
						top: -10rpx;
						right: 35rpx;
						min-width: 28rpx;
						text-align: center;
						line-height: 28rpx;
						color: #fff;
						font-size: 18rpx;
						height: 28rpx;
						background: #E51B00;
						border-radius: 14rpx;
					}
				}
			}

			.title {
				height: 40rpx;
				line-height: 40rpx;

				.l {

					
					font-size: 30rpx;
					color: #000000;
					line-height: 40rpx;
					text-align: left;

				}

				.r {
					text {

						height: 40rpx;
						
						font-size: 26rpx;
						color: #D1D1D6;
						text-align: left;
						margin-right: 5rpx;
					}

					image {
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}

		.user-top {
			.img {
				width: 140rpx;
				height: 140rpx;
				border-radius:50%;
				image {
					width: 140rpx;
					height: 140rpx;
					border: 4rpx solid #000000;
					border-radius:50%;
				}
			}
			.con {
				flex: 1;
				width: 1rpx;
				margin-left: 35rpx;

				.name {

					height: 60rpx;
					line-height: 60rpx;

					font-weight: bold;
					font-size: 40rpx;
					color: #000000;
					text-align: left;

				}

				.tel {
					margin-top: 15rpx;
					height: 40rpx;
					line-height: 40rpx;

					
					font-size: 28rpx;
					color: #7B7B7B;
					text-align: left;

					button {
						font-size: 28rpx;
						color: #E51B00;
						font-weight: 600;
						margin-left: 20rpx;
						text-decoration: underline;
						background-color: #fff;
						cursor: pointer;
						display: block;
						line-height: 40rpx;
						overflow: hidden;
						padding: 0;

						&:after {
							display: none;
						}
					}


				}
			}
		}
	}
</style>